<template>
    <div>
      <div class="headimg">
        <router-link to="/mian/0">
        <img src="../../assets/lyl/image/tuijian/ti.png" alt="">
        </router-link>
      </div>
      <div class="zhiyou">
        <div v-for="item in datas">
          <img :src="item.ri" alt="">
          <p>{{item.title}}</p>
        </div>
      </div>
      <h4>热卖品类</h4>
      <div class="foot">
        <div v-for="item in datas2">
          <img :src="item.ri2" alt="">
          <p>{{item.title}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Tuijian",
      data(){
        return {
           datas:[
             {ri:require('../../assets/lyl/image/tuijian/feblei-RB.png'),title:'日本直邮'},
             {ri:require('../../assets/lyl/image/tuijian/feblei-MG.png'),title:'美国直邮'},
             {ri:require('../../assets/lyl/image/tuijian/feblei-YG.png'),title:'英国直邮'},
             {ri:require('../../assets/lyl/image/tuijian/feblei-ADLY.png'),title:'澳大利亚直邮'},
             {ri:require('../../assets/lyl/image/tuijian/feblei-ZG.png'),title:'中国直邮'},
           ],
          datas2:[
            {ri2:require('../../assets/lyl/image/tuijian/feblei-1.png'),title:'洁面护理'},
            {ri2:require('../../assets/lyl/image/tuijian/feblei-3.png'),title:'人气口红'},
            {ri2:require('../../assets/lyl/image/tuijian/feblei-5.png'),title:'名牌包包'},
            {ri2:require('../../assets/lyl/image/tuijian/feblei-1.png'),title:'洁面护理'},
            {ri2:require('../../assets/lyl/image/tuijian/feblei-3.png'),title:'人气口红'},
            {ri2:require('../../assets/lyl/image/tuijian/feblei-5.png'),title:'名牌包包'}
          ]
        }
      }
    }
</script>

<style scoped>
  .headimg{
    padding: 2rem;
  }
  .headimg img{
    width: 100%;
    height: 21rem;
  }
  .zhiyou{
    display: flex;
    flex-wrap: wrap;
    margin: 0 2rem;
    border-bottom: 1px solid #ccc;
  }
  .zhiyou div{
    width: 33.33%;
    text-align: center;
    font-size: 28px;
  }
  .zhiyou div img{
    width: 5.3rem;
  }
  .zhiyou div p{
    margin: 3.4rem 0 4.2rem;
  }
  h4{
    margin: 2rem 0 0 2rem;
    font-size: 28px;
  }
  .foot{
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
  }
  .foot div{
    width: 33.33%;
    text-align: center;
    font-size: 28px;
  }
  .foot div img{
    width: 11.6rem;
    margin: 3rem 0 0.7rem;
  }
</style>
